<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">车站车次查询详情</h1>

		</header>
		<div class="mui-content">
			<!--搜索结果：经过&nbsp;合肥&nbsp;列车共有325趟-->
		    <div id="select_result" style="margin-top: 2%;margin-bottom: 2%;">	
		    </div>
		    <ul id="stationList" class="mui-table-view mui-table-view-chevron">
				<!--<li class="mui-table-view-cell">
					<div class="mui-table">
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: ;">序号：1</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: -10%;margin-right: -35%;">到达查询站历时：15小时24分</div>
						</div>
					</div>
					<div class="mui-table">
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: ;">车次：T64</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: 35%;margin-right: -25%;">等级：特快</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: 50%;margin-right: -30%;">车站：合肥</div>
						</div>
					</div>
					<div class="mui-table">
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: ;">出发站：合肥</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: -10%;">到达站：北京</div>
						</div>
					</div>
					<div class="mui-table">
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: ;">出发时间：18:40</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: -10%;">到达时间：05:56</div>
						</div>
					</div>
					<div class="mui-table">
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: ;">到时：----</div>
						</div>
						<div  class="mui-table-cell mui-col-xs-2 ">
							<div style="margin-left: -10%;">发时：18:40</div>
						</div>
					</div>
			   </li>-->
		    </ul>
		    
		    <!--<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item" href="#list_node">
					<span  class="mui-tab-label">车次类型</span>
				</a>
				<a class="mui-tab-item " href="#list_station">
					<span class="mui-tab-label">车站</span>
				</a>
				<a class="mui-tab-item " href="#">
					<span class="mui-tab-label">起售时间</span>
				</a>
			</nav>
			
			<div id="list_node" class="mui-popover" style="width: 45%;">
				<ul class="mui-table-view">
					<div class="mui-table-view-divider" >
						车次选择
						<button class="mui-pull-right" id="sure_node" style="margin-top: -3%;border:none  ">确定</button>
					</div>
					<form class="mui-input-group list_node">
						<div class="mui-input-row mui-checkbox">
							<label>GC高铁/城际</label>
							<input name="checkbox_node"  type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox">
							<label>D-动车</label>
							<input name="checkbox_node"  type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox ">
							<label>Z-直达</label>
							<input name="checkbox_node" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox">
							<label>T-特快</label>
							<input name="checkbox_node"  type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox ">
							<label>K-快速</label>
							<input name="checkbox_node" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox ">
							<label>其他</label>
							<input name="checkbox_node" type="checkbox" >
						</div>
					</form>
				</ul>
		    </div>
		    
		    <div id="list_station" class="mui-popover" style="width: 45%;">
				<ul class="mui-table-view">
					<div class="mui-table-view-divider" >
						车站选择
						<button class="mui-pull-right" id="sure_station" style="margin-top: -3%;border:none  ">确定</button>
					</div>
					<form class="mui-input-group list_station">
						<div class="mui-input-row mui-checkbox">
							<label>合肥南</label>
							<input name="checkbox_station" value="Item 3" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox">
							<label>合肥</label>
							<input name="checkbox_station" value="Item 4" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox ">
							<label>合肥北</label>
							<input name="checkbox_station" type="checkbox" >
						</div>
					</form>
				</ul>
		    </div>-->
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function(){
					// 获得列表界面的webview
					var list  = plus.webview.getWebviewById('template-main.html');   
					// 触发前往页面的自定义事件（例：AddNew）,从而进行数据刷新
					mui.fire(list ,'refresh',{
						address_id:"template-sub.html",
						title:"车站车次查询",
					});
					// 返回true，继续页面关闭逻辑
					return true;
				},
			});
			var stationList;
			var data;
			var dataItem;
			var list = '';
			var flag=[]; //记录车型类型
			var station=[]; //记录车站
			mui.plusReady(function(){ 
				var self = plus.webview.currentWebview(); //获取当前页面
				var select_result=document.getElementById('elect_result');
				stationList=document.getElementById('stationList');
				
				data= self.data; //接收上一届面传来的数据
				dataItem =data.data.data;
				set_select_result();
				set_stationList(0,flag);
				//确定按钮
				var sure_node =  document.getElementById("sure_node");
			    mui('.list_node').on('change', 'input', function() {
				    var value = this.checked?"1":"0";
				    console.log(this.previousElementSibling.innerText+value);
				    if(this.previousElementSibling.innerText=="GC高铁/城际") flag[0]=value;
				    if(this.previousElementSibling.innerText=="D-动车") flag[1]=value;
				    if(this.previousElementSibling.innerText=="Z-直达") flag[2]=value;
				    if(this.previousElementSibling.innerText=="T-特快") flag[3]=value;
				    if(this.previousElementSibling.innerText=="K-快速") flag[4]=value;
				    if(this.previousElementSibling.innerText=="其他") flag[5]=value;
			    });
				sure_node.addEventListener('tap',function(){
					//先判断点击了哪些按钮	
					mui('.mui-popover').popover('hide',sure_node);	
//					stationList.innerHTML = '';
					set_stationList(1,flag);
				});
			})
			
			function set_select_result(){
				var sel='';
				sel= sel+'搜索结果：经过&nbsp;合肥&nbsp;列车共有'+dataItem.length+'趟';
				select_result.innerHTML =sel;
			}
			//index:0表示车次列表不做任何改变
			//index：1表示车次列表按照车次类型进行筛选
			//index:3表示车次列表按照车站进行筛选
			function set_stationList(index,flag){
				var length=dataItem.length;
				console.log("顺序显示--->index"+index);
				console.log("length--->"+length);
				list='';
				var j=0;
				if(index==0)
				{
					for (i = 0; i < length; i++) {
						j=i+1;
						list=list+set_html(i,j);
					}
				}else if(index==1){
					for (i = 0; i < length; i++) {
						if(flag[0]==1&&dataItem[i].station_train_code.substr(0,1)=='G'){
							j=j+1;
						    list=list+set_html(i,j);
						}
						if(flag[1]==1&&dataItem[i].station_train_code.substr(0,1)=='D'){
							j=j+1;
						    list=list+set_html(i,j);
						}
						if(flag[2]==1&&dataItem[i].station_train_code.substr(0,1)=='Z'){
							j=j+1;
						    list=list+set_html(i,j);
						}
						if(flag[3]==1&&dataItem[i].station_train_code.substr(0,1)=='T' ){
							j=j+1;
						    list=list+set_html(i,j);
						}
						if(flag[4]==1&&dataItem[i].station_train_code.substr(0,1)=='K' ){
							console.log(flag[4]);
							console.log(dataItem[i].station_train_code.substr(0,1));
							j=j+1;
						    list=list+set_html(i,j);
						}
						if(flag[5]==1&&dataItem[i].station_train_code=='其他'){
							j=j+1;
						    list=list+set_html(i,j);
						}
						    
					}
				}
				stationList.innerHTML=list;
			}
			
			function set_html(i,j){
				var changelist='';
				changelist=changelist+'<li class="mui-table-view-cell">'+
										'<div class="mui-table">'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: ;">序号：'+j+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: -10%;margin-right: -35%;">到达查询站历时：'+dataItem[i].running_time+'</div>'+
											'</div>'+
										'</div>'+
										'<div class="mui-table">'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: ;">车次：'+dataItem[i].station_train_code+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: 35%;margin-right: -25%;">等级：'+dataItem[i].train_class_name+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: 50%;margin-right: -50%;">车站：'+dataItem[i].station_name+'</div>'+
											'</div>'+
										'</div>'+
										'<div class="mui-table">'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: ;">出发站：'+dataItem[i].start_station_name+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: -10%;">到达站：'+dataItem[i].end_station_name+'</div>'+
											'</div>'+
										'</div>'+
										'<div class="mui-table">'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: -10%;">出发时间：'+dataItem[i].start_start_time+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: -10%;">到达时间：'+dataItem[i].end_arrive_time+'</div>'+
											'</div>'+
										'</div>'+
										'<div class="mui-table">'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: ;">到时：'+dataItem[i].arrive_time+'</div>'+
											'</div>'+
											'<div  class="mui-table-cell mui-col-xs-2 ">'+
												'<div style="margin-left: -10%;">发时：'+dataItem[i].start_time+'</div>'+
											'</div>'+
										'</div>'+
								   '</li>';
				return changelist;
			}
		</script>
	</body>
</html>